<template>
    <el-form ref="userAddressFormRef" :model="userAddress" label-width="120px" :rules="rules">
        <el-form-item label="联系人" prop="consignee">
            <el-input v-model="userAddress.consignee" placeholder="请填写收货人姓名" />
        </el-form-item>

        <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="userAddress.sex">
                <el-radio label="MALE" >男</el-radio>
                <el-radio label="FEMALE" >女</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item label="手机号" prop="phone">
            <el-input v-model="userAddress.phone" placeholder="请填写收货手机号码" />
        </el-form-item>


        <!--prop="{provinceName,cityName,districtName}-->
        <el-form-item label="收货地址" >
            <el-select v-model="provinceCode"  placeholder="请选择所在省份" @change="provinceChange(provinceCode)">
                <el-option v-for="item in province" :key="item.areaId" :label="item.areaName" :value="item.areaId"  />
            </el-select>
            <el-select v-model="cityCode" placeholder="请选择所在城市" @change="cityChange(cityCode)">
                <el-option :key="0" :value="0" label="请选择所在城市"/>
                <el-option v-for="item in city" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
            </el-select>
            <el-select v-model="districtCode" placeholder="请选择所在区域" @change="districtChange(districtCode)">
                <el-option :key="0" :value="0" label="请选择所在区域"/>
                <el-option v-for="item in district" :key="item.areaId" :label="item.areaName" :value="item.areaId" />
            </el-select>
            <el-input v-model="userAddress.detail" prop="detail" placeholder="请填写详细地址" />
        </el-form-item>

        <el-form-item label="设为默认地址">
            <el-radio-group v-model="userAddress.isDefault">
                <el-radio  label="1" >是</el-radio>
                <el-radio  label="0" >否</el-radio>
            </el-radio-group>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="btnCommit">确认</el-button>
            <el-button>取消</el-button>
        </el-form-item>
    </el-form>





</template>

<script setup>
    import {ref, reactive, onMounted, computed} from 'vue'
    import axios from "axios";
    import {
        changeDefault,
        getCity,
        getCityName,
        getDistrict,
        getDistrictName,
        getProvince,
        getProvinceId,
        getProvinceName,
        submitAddress
    } from "../api/addressSelect";
    import store from "../store";
    import MapContainer from '@/components/MapContainer.vue'
    import {$get} from "../utils/addressRequest";

    const userAddress = ref({
        userId: '',
        consignee: '',
        sex: '',
        phone: '',
        provinceName: '',
        cityName: '',
        districtName: '',
        detail: '',
        isDefault: '0',
        provinceCode:'',
        cityCode:'',
        districtCode:'',
    })

    const provinceCode=ref();

    const province=ref([]);

    const cityCode=ref();

    const city=ref([]);

    const districtCode=ref();

    const district=ref([])

    //调用api的地址，拼接省市区的名称
    const nowProvinceName=ref('')
    const nowCityName=ref('')
    const nowDistrictName=ref('')
    const nowAddress=ref('')
    const locations=ref([])

    //定位到市区
    const cityIp=ref([])

    const rules=reactive({
        consignee: [
            /*
            * 是否必须输入，不输入提示的消息，
            * 最小长度，最大长度
            * */
            { required: true, message: '请输入收货人', trigger: 'blur' },
            { min: 2, max: 10, message: '收货人姓名长度为2-10', trigger: 'blur' },
        ],
        sex: [
            { required: true,message:'请选择性别',trigger:'blur'}
        ],
        phone: [
            { required: true, message: '手机号不能为空', trigger: 'blur' },
            { min:11,max:11, message: '请输入正确的手机号', trigger: 'blur' },
        ],
        detail: [
        { required: true, message: '地址不能为空', trigger: 'blur' }
        ]

    });


    onMounted(() => {
        getProvince().then(res => {
            for(let i=0;i<res.data.length;i++){
                province.value.push(res.data[i])
            }
        })
    });


    const userId = computed(() => {
        return store.getters.getId
    })

    //****//
    const provinceChange= async (id)=>{
        city.value=[]
        district.value=[]
        getCity({id:id}).then(res=>{
            for(let i=0;i<res.data.length;i++){
                city.value.push(res.data[i])
            }
        })
        //获取id对应名称
        nowProvinceName.value=province.value.find(c=>c.areaId==id).areaName
        nowAddress.value=nowProvinceName.value
        cityCode.value=0
        districtCode.value=0
        await toMap(nowAddress.value)
    }

    //****//
    const cityChange=async (id)=>{
        if(id==0){
            return
        }
        district.value=[]
        getDistrict({id:id}).then(res =>{
            for(let i=0;i<res.data.length;i++){
                district.value.push(res.data[i])
            }
        })
        nowCityName.value=city.value.find(c=>c.areaId==id).areaName
        nowAddress.value=nowProvinceName.value+nowCityName.value
        districtCode.value=0
        await toMap(nowAddress.value)
    }
    //****//
    const districtChange=async (id)=>{
        if(id==0){
            return
        }
        nowDistrictName.value=district.value.find(c=>c.areaId==id).areaName
        nowAddress.value=nowProvinceName.value+nowCityName.value+nowDistrictName.value
        await toMap(nowAddress.value)
    }

    //转换为经纬度，并传给子组件
    const toMap=async (Address)=>{
        let {geocodes} = await $get('https://restapi.amap.com/v3/geocode/geo?parameters',{
            //Web端的key
            key:'2b71974950a51f8c24eb45a1e462a84e',
            //地址
            address:Address
        })
        //坐标地址
        let {location}=geocodes[0]
        //传给子组件的值
        locations.value=location
    }

    const btnCommit=()=>{
        //测试用，默认为1
        userAddress.value.userId=userId.value
        getProvinceName({id:provinceCode.value}).then(res=>{
            userAddress.value.provinceCode=provinceCode.value
            userAddress.value.provinceName=res.data.areaName
        })
        getCityName({id:cityCode.value}).then(res=>{
            userAddress.value.cityCode=cityCode.value
            userAddress.value.cityName=res.data.areaName
        })
        getDistrictName({id:districtCode.value}).then(res=>{
            userAddress.value.districtCode=districtCode.value
            userAddress.value.districtName=res.data.areaName
        })
        console.log(userAddress.value)
        submitAddress(userAddress.value)
    }




</script>

<style scoped>

    .containerMap{
        height:500px;
        width:500px;
    }
</style>